<template>
    <div class="page-content">
        <div class="breadcrumb-bar">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-12">
                        <div class="breadcrumb-list">
                            <nav aria-label="breadcrumb" class="page-breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <router-link to="/">主页</router-link>
                                    </li>
                                    <li class="breadcrumb-item active" aria-current="page">课程中心</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">

            <section class="course-content" style="transform: none;">
                <div class="container" style="transform: none;">
                    <div class="row" style="transform: none;">
                        <div class="col-lg-9">

                            <div class="showing-list">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="d-flex align-items-center">
                                            <div class="view-icons">
                                                <a href="course-grid.html" class="grid-view"><i
                                                        class="feather-grid"></i></a>
                                                <a href="course-list.html" class="list-view active"><i
                                                        class="feather-list"></i></a>
                                            </div>
                                            <div class="show-result">
                                                <h4>Showing 1-9 of 50 results</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="show-filter add-course-info ">
                                            <form action="#">
                                                <div class="row gx-2 align-items-center">
                                                    <div class="col-md-6 col-item">
                                                        <div class=" search-group">
                                                            <i class="feather-search"></i>
                                                            <input type="text" class="form-control"
                                                                placeholder="Search our courses">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-lg-6 col-item">
                                                        <div class="form-group select-form mb-0">
                                                            <select class="form-select select select2-hidden-accessible"
                                                                name="sellist1" data-select2-id="1" tabindex="-1"
                                                                aria-hidden="true">
                                                                <option data-select2-id="3">Newly published </option>
                                                                <option>published 1</option>
                                                                <option>published 2</option>
                                                                <option>published 3</option>
                                                            </select><span
                                                                class="select2 select2-container select2-container--default"
                                                                dir="ltr" data-select2-id="2" style="width: 100%;"><span
                                                                    class="selection"><span
                                                                        class="select2-selection select2-selection--single"
                                                                        role="combobox" aria-haspopup="true"
                                                                        aria-expanded="false" tabindex="0"
                                                                        aria-disabled="false"
                                                                        aria-labelledby="select2-sellist1-yy-container"><span
                                                                            class="select2-selection__rendered"
                                                                            id="select2-sellist1-yy-container"
                                                                            role="textbox" aria-readonly="true"
                                                                            title="Newly published ">Newly
                                                                            published </span><span
                                                                            class="select2-selection__arrow"
                                                                            role="presentation"><b
                                                                                role="presentation"></b></span></span></span><span
                                                                    class="dropdown-wrapper"
                                                                    aria-hidden="true"></span></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-12 col-md-12 d-flex" v-for="cur in courseList" :key="cur.id">
                                    <div class="course-box course-design list-course d-flex">
                                        <div class="product">
                                            <div class="product-img">
                                                <a href="course-details.html">
                                                    <img class="img-fluid" alt="" :src="cur.img">
                                                </a>
                                                <div class="price">
                                                    <h3>{{ cur.category }}</h3>
                                                </div>
                                            </div>
                                            <div class="product-content">
                                                <div class="head-course-title">
                                                    <h3 class="title"><a href="course-details.html">{{ cur.title }}</a>
                                                    </h3>
                                                    <div class="all-btn all-category d-flex align-items-center">
                                                        <a href="javascript:void(0);" @click="addToCart(cur)"
                                                            class="btn btn-primary">加入购物车</a>
                                                    </div>
                                                </div>
                                                <p>课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</p>
                                                <div class="course-info border-bottom-0 pb-0 d-flex align-items-center">
                                                    <div class="rating-img d-flex align-items-center">
                                                        <img src="assets/img/icon/icon-01.svg" alt="">
                                                        <p>12+ Lesson</p>
                                                    </div>
                                                    <div class="course-view d-flex align-items-center">
                                                        <img src="assets/img/icon/icon-02.svg" alt="">
                                                        <p>9hr 30min</p>
                                                    </div>
                                                </div>
                                                <div class="rating">
                                                    <i class="fas fa-star filled"></i>
                                                    <i class="fas fa-star filled"></i>
                                                    <i class="fas fa-star filled"></i>
                                                    <i class="fas fa-star filled"></i>
                                                    <i class="fas fa-star"></i>
                                                    <span class="d-inline-block average-rating"><span>4.0</span>
                                                        (15)</span>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <AppPagination />
                        </div>
                        <div class="col-lg-3 theiaStickySidebar"
                            style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;">

                            <div class="theiaStickySidebar"
                                style="padding-top: 0px; padding-bottom: 1px; position: static; transform: none; top: 0px; left: 1187.33px;">
                                <div class="filter-clear">
                                    <div class="clear-filter d-flex align-items-center">
                                        <h4><i class="feather-filter"></i>过滤器</h4>
                                        <div class="clear-text">
                                            <p>清空</p>
                                        </div>
                                    </div>

                                    <div class="card search-filter categories-filter-blk">
                                        <div class="card-body">
                                            <div class="filter-widget mb-0">
                                                <div class="categories-head d-flex align-items-center">
                                                    <h4>课程类别</h4>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                                <div>
                                                    <label class="custom_check">
                                                        <input type="checkbox" name="select_specialist">
                                                        <span class="checkmark"></span> Scratch (3)
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="custom_check">
                                                        <input type="checkbox" name="select_specialist">
                                                        <span class="checkmark"></span> Python (2)
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="card search-filter">
                                        <div class="card-body">
                                            <div class="filter-widget mb-0">
                                                <div class="categories-head d-flex align-items-center">
                                                    <h4>Instructors</h4>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                                <div>
                                                    <label class="custom_check">
                                                        <input type="checkbox" name="select_specialist">
                                                        <span class="checkmark"></span> Keny White (10)
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="custom_check">
                                                        <input type="checkbox" name="select_specialist">
                                                        <span class="checkmark"></span> Hinata Hyuga (5)
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="custom_check">
                                                        <input type="checkbox" name="select_specialist">
                                                        <span class="checkmark"></span> John Doe (3)
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="custom_check mb-0">
                                                        <input type="checkbox" name="select_specialist" checked="">
                                                        <span class="checkmark"></span> Nicole Brown
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="card search-filter ">
                                        <div class="card-body">
                                            <div class="filter-widget mb-0">
                                                <div class="categories-head d-flex align-items-center">
                                                    <h4>价格</h4>
                                                    <i class="fas fa-angle-down"></i>
                                                </div>
                                                <div>
                                                    <label class="custom_check custom_one">
                                                        <input type="radio" name="select_specialist">
                                                        <span class="checkmark"></span> 全部 (18)
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="custom_check custom_one">
                                                        <input type="radio" name="select_specialist">
                                                        <span class="checkmark"></span> 免费 (3)
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="custom_check custom_one mb-0">
                                                        <input type="radio" name="select_specialist" checked="">
                                                        <span class="checkmark"></span> 收费 (15)
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="card post-widget ">
                                        <div class="card-body">
                                            <div class="latest-head">
                                                <h4 class="card-title">最新课程</h4>
                                            </div>
                                            <ul class="latest-posts">
                                                <li>
                                                    <div class="post-thumb">
                                                        <a href="course-details.html">
                                                            <img class="img-fluid" src="assets/img/blog/blog-01.jpg"
                                                                alt="">
                                                        </a>
                                                    </div>
                                                    <div class="post-info free-color">
                                                        <h4>
                                                            <a href="course-details.html">Introduction LearnPress – LMS
                                                                plugin</a>
                                                        </h4>
                                                        <p>FREE</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="post-thumb">
                                                        <a href="course-details.html">
                                                            <img class="img-fluid" src="assets/img/blog/blog-02.jpg"
                                                                alt="">
                                                        </a>
                                                    </div>
                                                    <div class="post-info">
                                                        <h4>
                                                            <a href="course-details.html">Become a PHP Master and Make
                                                                Money</a>
                                                        </h4>
                                                        <p>$200</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                                <div class="resize-sensor"
                                    style="position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                                    <div class="resize-sensor-expand"
                                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                                        <div
                                            style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width: 340px; height: 2334px;">
                                        </div>
                                    </div>
                                    <div class="resize-sensor-shrink"
                                        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                                        <div
                                            style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup>
const cart = useCart();

const courseList = ref([
    {
        id: 1,
        img: "_nuxt/assets/img/course/course-10.jpg",
        title: "Scratch游戏入门",
        price: "FREE",
        category: "Scratch",
        date: "2021-01-20",
        views: "100",
        lessons: "10",
        students: "100",
    },
    {
        id: 2,
        img: "_nuxt/assets/img/course/course-02.jpg",
        title: "Python基础",
        price: "$200",
        category: "Python",
        date: "2021-01-20",
        views: "100",
        lessons: "10",
        students: "100"
    }])

const addToCart = (cur) => {
    cart.value.push(cur)
}
</script>